<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '工单详情'
  }
}
</route>

<template>
  <view class="h-100vh pb-8vh box-border overflow-auto">
    <view class="p-2 space-y-1">
      <Segmented v-model="activeTab" :options="tabs" @change="handleChange"></Segmented>
    </view>
    <view class="px-2 space-y-1">
      <wd-notice-bar
        text="李工：施工阶段注意安全，每日报工不要忘记了！"
        prefix="check-outline"
        type="info"
        custom-class="space"
      />
    </view>
    <template v-if="activeTab === '待施工'">
      <Warn :warnList="warnList"></Warn>
      <WarnMessage></WarnMessage>
      <FormDSG></FormDSG>
      <UnderButton text="施工准备完成" @click="submit"></UnderButton>
    </template>
    <template v-else-if="activeTab === '施工确认'">
      <Warn :warnList="warnList1"></Warn>
      <FormDSG2></FormDSG2>
      <UnderButton text="施工确认完成" @click="submit1"></UnderButton>
    </template>
    <template v-else-if="activeTab === '开始施工'">
      <Warn :warnList="warnList3"></Warn>
      <WarnMessage></WarnMessage>

      <FormDSG1></FormDSG1>
      <UnderButton text="开始调试" @click="submit2"></UnderButton>
    </template>
    <template v-else-if="activeTab === '调试'">
      <view class="flex flex-justify-between mx-4 my-2rpx flex-items-center">
        <text class="text-lg font-size-3 font-800">步骤</text>
      </view>
      <view>
        <wd-card customClass="">
          <wd-text
            type="primary"
            text="
            第一步：XXXXXXXXXXXX 
            第二步：ZZZZZZZZZZZZZ
            第三步：YYYYYYYYYYYYY
            第四步：WWWWWWWWWWWWW
            "
          ></wd-text>
        </wd-card>
      </view>
      <view class="flex flex-justify-between mx-4 my-2rpx flex-items-center">
        <text class="text-lg font-size-3 font-800">数据上传</text>
      </view>
      <view>
        <wd-card>
          <FormCore
            :fields="[
              {
                fieldType: 'input',
                name: 'guoshuSL',
                prop: 'guoshuSL',
                label: '设备编码',
                placeholder: '请输入设备调试编码'
              },
              {
                fieldType: 'upload',
                name: 'guoshu',
                prop: 'guoshu',
                label: '调试图片',
                uploadConfig: {
                  action: 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload',
                  maxCount: 5,
                  accept: 'all'
                },
                rules: [{ required: true, message: '必填字段' }]
              }
            ]"
            :initialValues="formData"
          ></FormCore>
        </wd-card>
      </view>

      <UnderButton text="下一步" @click="submit3"></UnderButton>
    </template>
    <template v-else-if="activeTab === '试运行'">
      <view class="flex flex-justify-between mx-4 my-2rpx flex-items-center">
        <text class="text-lg font-size-3 font-800">数据上传</text>
      </view>
      <view>
        <wd-card>
          <FormCore
            :fields="[
              {
                fieldType: 'date',
                name: 'dateTime',
                prop: 'dateTime',
                label: '截止时间',
                placeholder: '请选择截止时间',
                rules: [{ required: true, message: '必填字段' }]
              },
              {
                fieldType: 'upload',
                name: 'yunxin',
                prop: 'yunxin',
                label: '运行图片',
                uploadConfig: {
                  action: 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload',
                  maxCount: 5,
                  accept: 'all'
                },
                rules: [{ required: true, message: '必填字段' }]
              }
            ]"
            :initialValues="formData"
          ></FormCore>
        </wd-card>
      </view>

      <UnderButton text="下一步" @click="submit4"></UnderButton>
    </template>
    <Feature></Feature>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Segmented from './components/Segmented.vue'
import Warn from './components/Warn.vue'
import WarnMessage from './components/WarnMessage.vue'
import FormDSG from './modules/FormDSG.vue'
import UnderButton from './components/UnderButton.vue'
import FormDSG2 from './modules/FormDSG2.vue'
import FormDSG1 from './modules/FormDSG1.vue'
import Feature from './components/Feature.vue'
import FormCore from './components/FormCore.vue'
const activeTab = ref<number | string>('待施工')
const warnList = ref(['和客户沟通施工时间', '确认施工准备确认清单和现场施工预算', '确认三人及以上去现场施工'])
const warnList1 = ref(['对比勘察阶段图片，查看是否有变动', '确认是否需要撤离', '如果撤离，需要重新勘察'])
const formData = ref({})
const warnList3 = ref(['每日上报记录', '完成每一个库的改造工作'])
const tabs = ref([
  { value: '待施工', disabled: false },
  { value: '施工确认', disabled: true },
  { value: '开始施工', disabled: true },
  { value: '调试', disabled: true },
  { value: '试运行', disabled: true },
  { value: '施工完成', disabled: true }
])
onMounted(() => {
  const savedData = uni.getStorageSync('tabs2')
  if (savedData) {
    tabs.value = savedData._value
    let disabled = tabs.value.filter(v => !v.disabled)
    activeTab.value = disabled[disabled.length - 1]?.value
  }
})
const submit = () => {
  tabs.value[1].disabled = false
  activeTab.value = '施工确认'
  uni.setStorageSync('tabs2', tabs)
}
const submit1 = () => {
  uni.showActionSheet({
    itemList: ['正常施工', '出现异常，无法施工'],
    success: res => {
      if (res.tapIndex === 0) {
        tabs.value[2].disabled = false
        activeTab.value = '开始施工'
        uni.setStorageSync('tabs2', tabs)
      } else {
        tabs.value[1].disabled = true
        activeTab.value = '待施工'
        uni.setStorageSync('tabs2', tabs)
      }
    },
    fail: err => {
      console.error('显示操作菜单失败', err)
    }
  })
}
const submit2 = () => {
  tabs.value[3].disabled = false
  activeTab.value = '调试'
  uni.setStorageSync('tabs2', tabs)
}
const submit3 = () => {
  tabs.value[4].disabled = false
  activeTab.value = '试运行'
  uni.setStorageSync('tabs2', tabs)
}
const submit4 = () => {
  tabs.value[5].disabled = false
  activeTab.value = '施工完成'
  uni.setStorageSync('tabs2', tabs)
}
const handleChange = e => {
  console.log(e)
}
</script>

<style lang="scss" scoped></style>
